@import "variables";
@import "mixins";
.圆角矩形_2_副本 {
  border-width: 1px;
  border-color: rgb(115, 72, 172);
  border-style: solid;
  background-image: -moz-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
  background-image: -webkit-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
  background-image: -ms-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
  position: absolute;
  left: 180px;
  top: 412px;
  width: 358px;
  height: 68px;
  z-index: 28;
}
.圆角矩形_2 {
  border-width: 1px;
  border-color: rgb(115, 72, 172);
  border-style: solid;
  border-radius: 10px;
  position: absolute;
  left: 180px;
  top: 412px;
  width: 358px;
  height: 68px;
  z-index: 27;
}


.segmented-control {
  position: relative;
  overflow: hidden;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1em;
  font-size: fontSize(m);
  border: 1px solid color(primary);
  border-radius: 10px;
  background-color: transparent;
  -webkit-touch-callout: none;
  .control-item {
    overflow: hidden;
    display: table-cell;
    width: 1%;
    line-height: 2.35714;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: color(primary);
    @include transition(all 0.1s linear);
    &:not(:first-child) {
      border-left: 1px solid color(primary);
    }
    &.active {
      color: #ffffff;
      background-image: -moz-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
      background-image: -webkit-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
      background-image: -ms-linear-gradient( 83deg, rgb(89,64,158) 0%, rgb(145,80,187) 100%);
    }
    input {
      display: none;
    }
  }
  &.segmented-control-xs {
    font-size: fontSize(xs);
  }
  &.segmented-control-s {
    font-size: fontSize(s);
  }
  &.segmented-control-l {
    font-size: fontSize(l);
  }
  &.segmented-control-xl {
    font-size: fontSize(xl);
  }
}


//@mixin make-segmented-control-variant($color) {
//  .segmented-control.segmented-control-#{$color} {
//    border-color: color($color);
//    .control-item {
//      color: color($color);
//      border-color: color($color);
//      &.active {
//        color: #ffffff;
//        background-color: color($color);
//      }
//    }
//  }
//}
//
//
//@include make-segmented-control-variant(red);
//@include make-segmented-control-variant(green);
//@include make-segmented-control-variant(blue);
//@include make-segmented-control-variant(gray);
//@include make-segmented-control-variant(primary);